<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <p class="pinformation">搜索条件</p>
      <el-form :model="queryParams" ref="queryRef" label-width="120">
        <el-row>
          <el-col :span="10">
            <el-form-item label="方法编号：" prop="methodCode">
              <el-input
                v-model="queryParams.methodCode"
                maxlength="100"
                placeholder="请输入"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item
              label="方法名称："
              prop="methodName"
              label-width="80px"
            >
              <el-input
                v-model="queryParams.methodName"
                maxlength="100"
                placeholder="请输入方法名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="本机构是否使用：" prop="asd">
              <el-select
                v-model="queryParams.asd"
                placeholder="请选择"
                @change="handleQuery"
              >
                <el-option
                  v-for="dict in proxy.addListNoLimit(lims_standard_status)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="方法状态：" prop="status" label-width="80px">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择"
                @change="handleQuery"
              >
                <el-option
                  v-for="dict in proxy.addListNoLimit(lims_standard_status)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row justify="end">
              <el-button type="success" @click="handleQuery">搜索</el-button>
              <el-button class="business resetBtn" @click="resetQuery"
                >重置</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <p class="pinformation">检测方法列表</p>
        <p class="totalStyle">共 {{ total }} 条数据</p>
      </el-row>
      <el-table
        :data="methodList"
        ref="mainTableRef"
        v-loading="loading"
        :show-overflow-tooltip="true"
        class="business"
        @row-click="rowClick"
        :row-class-name="tableRowClass"
      >
        <el-table-column label="方法编号" align="center" prop="methodCode" />
        <el-table-column label="方法名称" align="center" prop="methodName" />
        <el-table-column
          label="本机构是否使用"
          align="center"
          prop="asd"
        />
        <el-table-column label="状态" align="center" prop="stepName" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-card class="rightCard">
      <el-tabs v-model="activityName" class="demo-tabs">
        <el-tab-pane label="适用范围" name="tab1">
          <tab1 v-if="activityName == 'tab1'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="原理与试剂" name="tab2">
          <tab2 v-if="activityName == 'tab2'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="仪器设备" name="tab3">
          <tab3 v-if="activityName == 'tab3'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="样品描述" name="tab4">
          <tab4 v-if="activityName == 'tab4'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="分析步骤" name="tab5">
          <tab5 v-if="activityName == 'tab5'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="结果表示" name="tab6">
          <tab6 v-if="activityName == 'tab6'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="准确度" name="tab7">
          <tab7 v-if="activityName == 'tab7'" :methodId="methodId"/>
        </el-tab-pane>
        <el-tab-pane label="质控措施" name="tab8">
          <tab8 v-if="activityName == 'tab8'" :methodId="methodId"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="LabGuide">
import tab1 from "./tabs/tab1.vue";
import tab2 from "./tabs/tab2.vue";
import tab3 from "./tabs/tab3.vue";
import tab4 from "./tabs/tab4.vue";
import tab5 from "./tabs/tab5.vue";
import tab6 from "./tabs/tab6.vue";
import tab7 from "./tabs/tab7.vue";
import tab8 from "./tabs/tab8.vue";
import { listMethod } from "@/api/store/method";
const { proxy } = getCurrentInstance();
const { lims_standard_status } = proxy.useShareDict("lims_standard_status");

const activityName = ref("tab1");

const queryParams = ref({ pageNum: 1, pageSize: 10 });
const methodList = ref([]);
const total = ref(0);
const loading = ref(0);
const methodId = ref("");

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function getList() {
  loading.value = true;
  listMethod(queryParams.value).then((response) => {
    methodList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

getList();

function rowClick(row) {
  heightBright.value = row.methodId;
  methodId.value = row.methodId
}

const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [{ tableName: "main", bottomHeight: 73 }];
    } else {
      heightParams.value = [{ tableName: "main", bottomHeight: 21 }];
    }
    getTableHeight();
  }
);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

let heightBright = ref("");

function tableRowClass({ row }) {
  if (row) {
    if (row.methodId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}
</script>
